---
interface Props {
  theme?: 'light' | 'dark';
}

const { theme = 'light' } = Astro.props;
---

<div class="giscus"></div>

<script
  src="https://giscus.app/client.js"
  data-repo="chovYena/blog"
  data-repo-id="R_kgDOK5TURA"
  data-category="Announcements"
  data-category-id="DIC_kwDOK5TURA4CbwYA"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme={theme}
  data-lang="zh-CN"
  data-loading="lazy"
  crossorigin="anonymous"
  async
>
</script>

<script>
  // 监听主题变化
  document.addEventListener('alpine:init', () => {
    Alpine.effect(() => {
      const isDark = Alpine.store('theme').isDark;
      const theme = isDark ? 'dark' : 'light';
      const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame');
      if (iframe) {
        iframe.contentWindow?.postMessage(
          { giscus: { setConfig: { theme } } },
          'https://giscus.app'
        );
      }
    });
  });
</script> 